import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import './App.css';

// 导入所有Hook示例组件
import UseStateExample from './components/UseStateExample';
import UseEffectExample from './components/UseEffectExample';
import UseContextExample from './components/UseContextExample';
import UseRefExample from './components/UseRefExample';
import UseCallbackExample from './components/UseCallbackExample';
import UseMemoExample from './components/UseMemoExample';
import UseReducerExample from './components/UseReducerExample';
import CustomHooksExample from './components/CustomHooksExample';

function App() {
  // 状态用于跟踪当前选中的导航项
  const [activeNav, setActiveNav] = useState('');

  // 所有Hook示例的配置
  const hookExamples = [
    {
      id: 'useState',
      name: 'useState',
      path: '/useState',
      component: <UseStateExample />,
      description: '用于在函数组件中添加状态'
    },
    {
      id: 'useEffect',
      name: 'useEffect',
      path: '/useEffect',
      component: <UseEffectExample />,
      description: '用于处理副作用，如数据获取、订阅等'
    },
    {
      id: 'useContext',
      name: 'useContext',
      path: '/useContext',
      component: <UseContextExample />,
      description: '用于访问React上下文，避免属性钻取'
    },
    {
      id: 'useRef',
      name: 'useRef',
      path: '/useRef',
      component: <UseRefExample />,
      description: '用于保存可变值和访问DOM元素'
    },
    {
      id: 'useCallback',
      name: 'useCallback',
      path: '/useCallback',
      component: <UseCallbackExample />,
      description: '用于记忆回调函数，避免不必要的重新渲染'
    },
    {
      id: 'useMemo',
      name: 'useMemo',
      path: '/useMemo',
      component: <UseMemoExample />,
      description: '用于记忆计算结果，避免昂贵的重新计算'
    },
    {
      id: 'useReducer',
      name: 'useReducer',
      path: '/useReducer',
      component: <UseReducerExample />,
      description: '用于处理复杂的状态逻辑，类似于Redux'
    },
    {
      id: 'customHooks',
      name: '自定义Hooks',
      path: '/customHooks',
      component: <CustomHooksExample />,
      description: '展示如何创建和使用自定义Hooks'
    }
  ];

  // 处理导航项点击
  const handleNavClick = (id) => {
    setActiveNav(id);
  };

  return (
    <Router>
      <div className="app">
        <header className="app-header">
          <h1>React Hooks 示例</h1>
          <p className="app-description">
            这个应用展示了React Hooks的各种用法和最佳实践
          </p>
        </header>

        <div className="app-container">
          <nav className="app-nav">
            <ul>
              {hookExamples.map((example) => (
                <li key={example.id}>
                  <Link
                    to={example.path}
                    className={activeNav === example.id ? 'active' : ''}
                    onClick={() => handleNavClick(example.id)}
                  >
                    {example.name}
                  </Link>
                  <span className="nav-description">{example.description}</span>
                </li>
              ))}
            </ul>
          </nav>

          <main className="app-content">
            <Routes>
              {hookExamples.map((example) => (
                <Route
                  key={example.id}
                  path={example.path}
                  element={example.component}
                />
              ))}
              <Route path="/" element={<Navigate to="/useState" replace />} />
            </Routes>
          </main>
        </div>

        <footer className="app-footer">
          <p>React Hooks 演示应用 - 学习React Hooks的实用指南</p>
        </footer>
      </div>
    </Router>
  );
}

export default App;